<template>
	<view>
		<uni-section class="mb-10" title="当前订单" sub-title="" type="line"> </uni-section>
		<block v-if="list != null">
			<view v-if="list != null && list.length == 0" style="padding: 40rpx 40rpx 40rpx 40rpx; text-align: center">
				<image src="/static/resource/images/empty.png" mode="widthFix" style="width: 200rpx" />
				<view class="f5">没有相关内容~</view>
			</view>
			<view v-else class="od-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="od-item" @tap="toOrder" :data-id="item.out_trade_no"
						@click="toOrder(item.orderNumber)">
						<view class="weui-cell weui-cell_access">
							<view class="weui-cell__hd">
								<view>
									<!-- 订单图片 -->
									<image src="/static/images/home/accompany3.png" class="od-logo"
										style="width: 200rpx; height: 200rpx; margin-right: 20rpx" />
								</view>
							</view>
							<view class="weui-cell__bd">
								<view>
									<text style="font-weight: bold">{{ item.address}}</text>
								</view>
								<view class="od-info">
									<view>

										<view>
											预约时间：
											<text>{{ item.createTime }}</text>

										</view>
										<view>
											就诊人员：
											<text>{{ item.username }}</text>
										</view>
									</view>

									<view>
										<view>
											联系电话：
											<text>{{ item.phone }}</text>

										</view>

										<view>服务金额：
											<text>{{item.amount}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="weui-cell__ft">
								<!-- 待付款 -->
								<block v-if="item.trade_state == '待支付'">
									<view style="color: #ffa200"><text>待支付</text></view>
									<view style="color: #ffa200">
										<counter style="font-size: 24rpx" :second="item._exp_time"
											@counterOver="onCounterOver" />
									</view>
								</block>
								<!-- 进行中 -->
								<block v-if="item.trade_state == '待服务'">
									<view style="color: #1da6fd"><text>待服务</text></view>
								</block>
								<!-- 已完成 -->
								<block v-if="item.trade_state == '已完成'">
									<view style="color: #21c521"><text>已完成</text></view>
								</block>
								<!-- 已取消 -->
								<block v-if="item.trade_state == '已取消'">
									<view style="color: #999999"><text>已取消</text></view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</view>
		</block>



		<uni-section title="流程详情" type="line" padding>
			<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
		</uni-section>
		<!-- <button type="primary" size="big" style="margin: 75px 25px; width: 450px;" @click="change">节点打卡</button> -->
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				list: null,
				active: 0,
				// list2: null,
				list2: [{
					name: '买家下单',
					id: '1',
					doTime: '2018-11-11'
				}, {
					name: '卖家发货',
					id: '1',
					doTime: '2018-11-12'
				}, {
					name: '买家签收',
					id: '1',
					doTime: '2018-11-13'
				}, {
					name: '交易完成',
					id: '1',
					doTime: '2018-11-14'
				}, {
					name: '卖家发货',
					id: '1',
					doTime: '2018-11-12'
				}, {
					name: '买家签收',
					id: '1',
					doTime: '2018-11-13'
				}, {
					name: '交易完成',
					id: '1',
					doTime: '2018-11-14'
				}, {
					name: '卖家发货',
					id: '1',
					doTime: '2018-11-12'
				}],

			}
		},

		onLoad(options) {
			this.id = options.id //接受上一个页面传过来的参数
			this.load()
			this.judgeActive()
		},

		methods: {
				
			judgeActive(){
				uni.request({
					url: 'http://localhost:8080/api/step/judgeActive',
					method: 'GET',
					data: {
			             // id: this.list2[this.active].id
					},
					success: (res) => {
						this.active = res.data.data
						
					},
					
				});
				
			},
			change() {
				if (this.active < this.list2.length - 1) {
					
					this.active += 1
					console.log(this.active)
					console.log(this.id)
					
					uni.request({
						url: 'http://localhost:8080/api/step/changeProcess',
						method: 'GET',
						data: {
							id: this.list2[this.active].id
						},
						success: (res) => {
							
							
						},
						
					});
				} 
				else {
					// this.active = 0
					uni.request({
						url: 'http://localhost:8080/api/order/changeStatus2',
						method: 'GET',
						data: {
							orderId: this.id
						},
						success: (res) => {
							uni.showToast({
								title: '结束服务',
								icon: 'none',
							});
							uni.reLaunch({
								url: "/pages/order/index"
							})
						},
						fail: (error) => {
							console.error('请求出错：', error);
						}
					});
				}
			},

			load() {
				uni.request({
					url: "http://localhost:8080/api/order/orderInfo",
					method: 'GET',
					data: {
						id: this.id, //穿给后端的参数
					},
					success: res => {
						this.list = res.data.data; //前端接受的数据
					},
					fail: res => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				});
				uni.request({
					url: "http://localhost:8080/api/step/list",
					method: 'GET',
					data: {
						orderId: this.id, //穿给后端的参数
					},
					success: res => {
						this.list2 = res.data.data; //前端接受的数据
					},
					fail: res => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 150px;
		flex-direction: row;
	}


	.od-item {
		margin: 20rpx;
		background: #ffffff;
		border: 1rpx solid #eeeeee;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.od-item .weui-cell {
		padding: 30rpx;
		-webkit-box-align: stretch;
		-webkit-align-items: stretch;
		align-items: stretch;
	}

	.od-logo {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.od-info view {
		font-size: 24rpx;
		color: #999999;
	}

	.od-info text {
		font-size: 24rpx;
		color: #999999;
	}

	.od-item .weui-cell__ft text {
		font-size: 24rpx;
	}

	.mb-10 {
		margin-bottom: 10px;
	}
</style>